<template>
  <div class="container">
    <div @click="saveQuestion" class="question-form">
      <div class="options-section-enhanced">



      <component
      :is="questionComponents[questionForm.quType]"
         :questionData="data" @emitData="handleChildData" :editorContent="questionForm.content" :analyseContent="analysis"  />

      </div>
      <!-- 判断题答案 -->
      <div v-if="questionForm.type === '判断题'" class="form-group">
      </div>
    </div>
  </div>
</template>



<script setup >
import { defineProps, onMounted, ref } from 'vue';
import AddSingle from '../add/AddSingle.vue';
import AddShort from '../add/AddShort.vue';
import AddJudgment from '../add/AddJudgment.vue';
import { QuestionService } from '@/api/questionApi';

const questionComponents = {
  1: AddSingle,
  3: AddJudgment,
  4: AddShort,
  5: 'FillBlank'
}

const props = defineProps(["questionForm"])

const questionForm=ref(props.questionForm);


const data =ref()
const analysis=ref(props.questionForm.analysis);
const loading=ref(false)

const handleChildData = async (data) => {
  console.log("wefghjkhgfd", data)
loading.value=true;
  try {

    const response = await QuestionService.updateQuestion(data);
    if (response.code == 1) {
    ElMessageBox.alert('题目添加成功', '', {
    confirmButtonText: '确定',
    callback: (action) => {
      if(action== 'confirm'||action== 'cancel'){
        emit('addShow',false)
      }
    },
  })
  }
  }
  finally {
    loading.value = false;
  }
};





onMounted(()=>{

console.log('questionForm',questionForm.value)

 data.value =
  {
  id: questionForm.value.id,
  quType: questionForm.value.quType,
  content: questionForm.value.content,
  analysis: questionForm.value.analysis,
  title: '',
  shortAnswer: questionForm.value?.correctAnswerVo?.shortAnswer ?? '',
  difficulty: '0',
options: (questionForm.value?.options || []).map((item) => ({
  ...item,
  checked: !!(
    item.id &&
    questionForm.value?.correctAnswerVo?.optionIds &&
    Array.isArray(questionForm.value.correctAnswerVo.optionIds) &&
    questionForm.value.correctAnswerVo.optionIds.includes(item.id)
  ),
})),
  selectedOptionIndex: null, // 当前选中的选项索引
  judgmentAnswer: 'true',
  languageType: 'chinese',
  timeLimit: 60
}


})

</script>

<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
}
.modal-content {
  background-color: white;
  border-radius: 8px;
  width: 90%;
  max-width: 700px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
  transition: transform 0.3s ease-out;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
  position: sticky;
  width: 100%;
  top: -18px;

}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--primary-color);
}

@media (max-width: 768px) {
  .modal-content {
    width: 95%;
    margin: 1rem;
  }


}

.question-form {
  padding: 10px;
width: 100%;
}


</style>
